<template>
  <el-container>
    <el-main>
      <el-card>
        <el-form label-width="auto">
          <el-form-item label="">
            <el-form-item label="代码" prop="code">
              <el-input
                v-model="formData.code"
                placeholder="请输入单行文本"
                clearable
                :style="{ width: '80%' }"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="名称" prop="name">
              <el-input
                v-model="formData.name"
                placeholder="请输入单行文本"
                clearable
                :style="{ width: '80%' }"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="日期选择" prop="tradingDate">
              <el-date-picker
                popper-class="date_class"
                type="date"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                v-model="formData.tradingDate"
                :locale="locale"
                clearable
              ></el-date-picker>
            </el-form-item>
            <el-button type="primary" @click="handleSelect()"
              >获取数据</el-button
            >
          </el-form-item>
        </el-form>
      </el-card>
      <el-card>
        <template #header>
          <div class="card-header">
            <span>{{ table_title }}</span>
          </div>
        </template>
        <el-table
          v-loading="loading"
          :data="table_data"
          :show-header="true"
          :max-height="500"
          :cell-style="cellStyle"
          stripe
        >
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column prop="tradingDate" label="时间"></el-table-column>
          <el-table-column prop="openingPrice" label="开盘价"></el-table-column>
          <el-table-column prop="closingPrice" label="收盘价"></el-table-column>
          <el-table-column prop="changeAmount" label="涨跌额"></el-table-column>
          <el-table-column
            prop="changeRate"
            label="涨跌幅"
            :formatter="formatter1"
          ></el-table-column>
          <el-table-column prop="peakPrice" label="最高价格"></el-table-column>
          <el-table-column
            prop="bottomPrice"
            label="最低价格"
          ></el-table-column>
          <el-table-column
            prop="tradingVolume"
            label="成交量（手）"
          ></el-table-column>
          <el-table-column
            prop="tradingAmount"
            label="成交额（元）"
          ></el-table-column>
          <el-table-column
            prop="turnoverRate"
            label="换手率"
            :formatter="formatter2"
          ></el-table-column>
          <el-table-column
            prop="amplitudeRate"
            label="振幅"
            :formatter="formatter3"
          ></el-table-column>
        </el-table>
        <el-divider />
        <el-pagination
          :current-page="current_page"
          :page-size="current_size"
          :page-sizes="[10, 20, 30]"
          :small="false"
          :background="true"
          layout="sizes, prev, pager, next, total"
          :total="total_num"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
import axios from "axios";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import { getCurrentInstance } from "vue";
export default {
  data() {
    return {
      locale: zhCn,
      update_status: "未开始",
      loading: false,
      // 当前选中的股票
      code: "",
      // 所有的选项
      options: [],
      table_title: "个股数据",
      // 个股详细信息
      table_data: [],
      // 分页相关选项
      // 当前查询的股票代码
      current_code: "",
      // 当前页
      current_page: 1,
      // 每一页的数量
      current_size: 10,
      // 数据总数
      total_num: 0,
      echarts: getCurrentInstance().appContext.config.globalProperties.$echarts,
      formData: {
        tradingDate: null,
        code: "",
      },
      rules: {
        tradingDate: [
          {
            required: true,
            message: "请选择日期选择",
            trigger: "change",
          },
        ],
      },
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      var currentDate = new Date();
      var year = currentDate.getFullYear();
      var month = String(currentDate.getMonth() + 1).padStart(2, "0"); // 月份从0开始，所以需要+1，并使用padStart补零
      var day = String(currentDate.getDate()).padStart(2, "0"); // 使用padStart补零
      this.formData.tradingDate = `${year}-${month}-${day}`;
      this.current_code = "0";
      this.current_page = 1;
      // 获取表格详细数据
      this.loading = true;
      this.table_title = "列表数据信息";
      axios({
        method: "get",
        url: "http://localhost:9001/stock/queryDataByPage",
        params: {
          code: this.formData.code,
          name: this.formData.name,
          tradingDate: this.formData.tradingDate,
          pagesize: this.current_size,
          page: this.current_page,
        },
      })
        .then((response) => {
          this.table_data = response.data.records;
          this.total_num = response.data.total;
          console.log(response);
          this.loading = false;
        })
        .catch((error) => {
          console.log(error);
          this.loading = false;
        });
    },
    handleSelect() {
      this.current_code = this.formData.code;
      this.current_page = 1;
      // 获取表格详细数据
      this.loading = true;
      axios({
        method: "get",
        url: "http://localhost:9001/stock/queryDataByPage",
        params: {
          code: this.formData.code,
          name: this.formData.name,
          tradingDate: this.formData.tradingDate,
          pagesize: this.current_size,
          page: this.current_page,
        },
      })
        .then((response) => {
          this.table_data = response.data.records;
          this.total_num = response.data.total;
          console.log(response);
          this.loading = false;
        })
        .catch((error) => {
          console.log(error);
          this.loading = false;
        });
      // 获取当前股票数据总数
    },
    formatter1(row) {
      return row.changeRate + "%";
    },
    formatter2(row) {
      return row.turnoverRate + "%";
    },
    formatter3(row) {
      return row.amplitudeRate + "%";
    },
    cellStyle({ row, column, rowIndex }) {
      console.log(rowIndex);
      console.log(column);
      if (row.changeRate > 0) {
        console.log(row.changeRate);
        if (column.label == "涨跌幅") {
          return { color: "red" };
        }
      } else {
        if (column.label == "涨跌幅") {
          return { color: "green" };
        }
      }
    },
    handleSizeChange(number) {
      this.current_size = number;
      this.loading = true;
      axios({
        method: "get",
        url: "http://localhost:9001/stock/queryDataByPage",
        params: {
          code: this.formData.code,
          name: this.formData.name,
          tradingDate: this.formData.tradingDate,
          pagesize: this.current_size,
          page: this.current_page,
        },
      })
        .then((response) => {
          this.table_data = response.data.records;
          console.log(response);
          this.loading = false;
        })
        .catch((error) => {
          console.log(error);
          this.loading = false;
        });
    },
    handleCurrentChange(number) {
      this.current_page = number;
      this.loading = true;
      axios({
        method: "get",
        url: "http://localhost:9001/stock/queryDataByPage",
        params: {
          code: this.formData.code,
          name: this.formData.name,
          tradingDate: this.formData.tradingDate,
          pagesize: this.current_size,
          page: this.current_page,
        },
      })
        .then((response) => {
          this.table_data = response.data.records;
          console.log(response);
          this.loading = false;
        })
        .catch((error) => {
          console.log(error);
          this.loading = false;
        });
    },
  },
};
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
